﻿@using EmoneyWeiXinEntity;
@using EmoneyWeiXinCommon
@{
    ViewBag.Title = "Index";
    string openid = ViewBag.openid;
}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>测吸金颜值</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link href="@Url.Content("~/css/ShuaLian/css/basic.css")?a=@(new Random().Next(10000))" rel="stylesheet" />
    <script src="@Url.Content("~/js/jquery.js")?a=@(new Random().Next(10000))"></script>
    <script src="@Url.Content("~/js/jquery.mobile-1.4.5.min.js")"></script>
    <script src="@Url.Content("~/js/jweixin-1.0.0.js")"></script>
    <script src="@Url.Content("~/js/WeiXinCommon.js")"></script>
</head>
<body class="body" onload="rize()" onresize="rize()">
    <div class="box">
        <input type="file" id="myFile" style="display: none" />
        <div class="bg01">
            <h2>传照片测赚钱能力</h2>
            <div class="main">
                <h3>
                    <div class="photo">
                        <img src="~/images/ShuaLian/main_img01.png" class="form-file-img-upload" data-name="avatar">
                    </div>
                    <div class="upload" style="display: none;">
                        <div class="upload_bg"></div>
                        <div class="upload_content">
                            <img src="~/images/ShuaLian/main_img01.png" id="img1" width="310" height="480">
                        </div>
                    </div>
                </h3>
                <p class="main_font">
                    <img src="~/images/ShuaLian/slide_img.png">放大图片右拉
                </p>
                <ul class="slide">
                    <li>
                        <img src="~/images/ShuaLian/slide_left.png" id="btnLeft"></li>
                    <li>
                        <p class="slide_bg"></p>
                        <span class="circle"></span></li>
                    <li>
                        <img src="~/images/ShuaLian/slide_right.png" id="btnRight"></li>
                </ul>
                <p class="main_font02"><a href="javascript:void(0)" id="btnsubmit">确认</a><a href="javascript:void(0)" id="reupload">重新上传</a></p>
            </div>
        </div>
        <footer class="footer"><a href="http://mp.weixin.qq.com/s?__biz=MzAxMTA0ODM3Mw==&mid=215697034&idx=1&sn=9c147cb2e6295a036bf5eab8a9f27f4c#rd">益盟股票分析&nbsp;帮您选股+解析<img src="~/images/ShuaLian/footer_img.png"></a></footer>
    </div>
</body>
<script>

    function rize() {
        var height = document.documentElement.clientHeight;
        var footer = $(".footer").height();
        $(".bg01").css({ "min-height": height - footer })
    }

    (function ($) {
        document.ontouchmove = function (e) { e.preventDefault(); };//手机上禁止拖动
        var isMove = false;
        var isMove2 = false;
        var prevX = -100;
        var prevY = -100;
        var imgTop = 0;
        var imgLeft = 0;
        var imgWidth = 310;
        var imgHeight = 480;
        var baseimgWidth = 310;
        var baseimgHeight = 480;
        var zzcKG = 0;
        var slideWith = 0;
        var circleWith = 0;
        var isHaveImg = false;
        var inputElement = document.getElementById("myFile");
        var img1 = document.getElementById("img1");
        var circle;
        var changeSizeValue = 0;
        var ds = 10;
        inputElement.addEventListener("change", handleFiles, false);
        function handleFiles() {
            var files = this.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /image.*/;
                if (!file.type.match(imageType)) {
                    continue;
                }

                var reader = new FileReader();
                reader.onload = (function (aImg) {
                    return function (e) {
                        aImg.src = e.target.result;
                        $(".upload").show();
                        $(".photo").hide();
                        isHaveImg = true;
                        calImageSize();
                    };
                })(img1);
                reader.readAsDataURL(file);

            }

        }


        function calImageSize() {
            imgWidth = zzcKG;
            baseimgWidth = zzcKG;
            //imgHeight = GetImageHeight(img1) * zzcKG / GetImageWidth(img1) * 1.0;
            //alert(GetImageHeight(img1) + " " + GetImageWidth(img1))
            //baseimgHeight = imgHeight;
            imgHeight = zzcKG * 1.3;
            baseimgHeight = imgHeight;
            $(img1).prop("width", zzcKG);
            $(img1).prop("height", baseimgHeight);

        }

       


        $(function () {
            $.mobile.loading('show', {
                text: '',
                textVisible: false,
                theme: 'z', html: ""
            });

            circle = $(".circle:eq(0)");
            calSize();
        });

        function calSize() {
            zzcKG = $(".upload_bg").eq(0).width(); //获取到遮罩层的宽高
            slideWith = $(".slide_bg:eq(0)").width();//获取slide的宽度
            circleWith = $(circle).width();

            //解决
        }

        function initEvent() {
            $(".form-file-img-upload").click(function () {
                $(inputElement).click();
            });

            $("#reupload").click(function () {
                $(inputElement).click();
            });
            window.onresize = calSize;
            $(".upload_bg").on("vmousedown", gameMouseDown);
            $(document).on("vmousemove", gameMouseMove);
            $(document).on("vmouseup", gameMouseUp);

            $(".circle").on("vmousedown", function () {
                isMove2 = true;
            });
            $("#btnsubmit").click(uploadData);

            $("#btnLeft").click(function () {
                changeSizeValue--;
                if (changeSizeValue < 0) {
                    changeSizeValue = 0;
                }
                changeImgSize(changeSizeValue);
                var circleLeft = (slideWith / ds) * changeSizeValue;
                circle.css("left", circleLeft);
            });

            $("#btnRight").click(function () {
                changeSizeValue++;
                if (changeSizeValue > ds - 1) {
                    changeSizeValue = ds - 1;
                }
                changeImgSize(changeSizeValue);
                var circleLeft = (slideWith / ds) * changeSizeValue;
                circle.css("left", circleLeft);
            });
        }
        function gameMouseDown() {
            isMove = true;
        }
        function gameMouseUp() {
            isMove = false;
            isMove2 = false;
            prevX = -100;
            prevY = -100;
            //alert(3);
        }
        function gameMouseMove(e) {
            if (isMove) {
                var y = e.clientY || e.targetTouches[0].clientY,
                    x = (e.clientX || e.targetTouches[0].clientX);
                if (prevX > 0) {
                    imgTop = parseFloat($(img1).css("top")) + (y - prevY) + "px";
                    imgLeft = parseFloat($(img1).css("left")) + (x - prevX) + "px";
                    if (parseFloat(imgTop) > 0) {
                        imgTop = 0;
                    } else
                        if (parseFloat(imgTop) + parseFloat(imgHeight) < zzcKG) {
                            imgTop = zzcKG - imgHeight;
                        }

                    if (parseFloat(imgLeft) > 0) {
                        imgLeft = 0;
                    } else
                        if (parseFloat(imgLeft) + imgWidth < zzcKG) {
                            imgLeft = zzcKG - imgWidth;
                        }

                    $(img1).css("top", imgTop);
                    $(img1).css("left", imgLeft);
                }
                prevX = x;
                prevY = y;
            } else {
                if (isMove2) {
                    var y = e.clientY || e.targetTouches[0].clientY,
                       x = (e.clientX || e.targetTouches[0].clientX);
                    if (prevX > 0) {
                        var circleLeft = parseFloat(circle.css("left")) + (x - prevX) + "px";
                        if (parseFloat(circleLeft) < 0) {
                            circleLeft = 0;
                        }
                        if (parseFloat(circleLeft) > slideWith - circleWith) {
                            circleLeft = slideWith - circleWith;
                        }

                        $(circle).css("left", circleLeft);
                        changeSizeValue = Math.floor(parseFloat(circleLeft) / (slideWith / ds));
                        changeImgSize(changeSizeValue);
                    }
                    prevX = x;
                    prevY = y;
                }
            }


        }
        function changeImgSize(val) {
            imgWidth = baseimgWidth + baseimgWidth * val;
            imgHeight = baseimgHeight + baseimgHeight * val;
            $(img1).prop("width", imgWidth);
            $(img1).prop("height", imgHeight);
        }
        //上传数据
        function uploadData() {
            if (isHaveImg) {
                $("#btnsubmit").text("上传中..");
                var fd = new FormData();
                fd.append("imgWith", parseInt(imgWidth));
                fd.append("imgHeith", imgHeight);
                fd.append("top", parseInt(imgTop));
                fd.append("left", parseInt(imgLeft));
                fd.append("size", parseInt(zzcKG));
                fd.append("file", inputElement.files[0]);
                fd.append("openid", '@openid')
                $.ajax({
                    url: '@Url.Action("ReceiptImg", "ShuaLian")',
                    type: 'post',
                    async: true,
                    processData: false,
                    contentType: false,
                    data: fd,
                    success: function (result) {
                        if (result == "1") {
                            window.location.href = "@Url.Action("ResultPage", "ShuaLian")?openid=" + "@openid";
                        } else if (result == "2") {
                            $("#btnsubmit").text("确认");
                            alert("活动只能参加一次哦！");
                        } else {
                            $("#btnsubmit").text("确认");
                            alert("别吓我，真有这么丑？上传都失败了！")

                        }
                    }
                });
            } else {
                alert("亲，你都没选图片上传个什么飞机！");
            }
        }
        initEvent();
    })(jQuery);



</script>
</html>
@{
    weixinUserEntity wxInfo = ViewBag.wxInfo as weixinUserEntity; 
}
@*  关于微信分享部分的代码*@
<script type="text/javascript">
    var AppId = "@wxInfo.AppId";
    var AppSercret = "@wxInfo.AppSecret";
    var goUrl = "@Config.Host_Url3" + "ShuaLian/ShareUrlInput";
    var shareUrl = "@Config.ShareJQUrl";
    var weixinId = "@wxInfo.id";
    var timestamp = "@ViewBag.timestamp";
    var imgUrl = "@Config.Host_Url3" + "imgUpload/" + "default.jpg";
    var tTitle = "这张脸能赚1.88万元 击败全国78%的股民";
    var tContent = "股市行情一路震荡\n您却凭借一张美脸躲过了所有的跌停\n捕捉了所有的涨停\n哥们儿 留个电话\n我们做朋友吧";
    var nonceStr = "@ViewBag.nonceStr";
    var signature = "@ViewBag.signature";

    $(function () {
        initSharePara();
    });
    ///初始化分享到朋友圈的功能
    function initSharePara() {
        goUrl = goUrl + "?weixinId=" + '@wxInfo.id' + "&fromOpenid=" + '@ViewBag.openid';
        goUrl = encodeURIComponent(goUrl);
        shareUrl = shareUrl + "?goUrl=" + goUrl + "&weixinId=" + '@wxInfo.id'
        mysharetime(shareUrl, imgUrl, tTitle, tContent, AppId, timestamp, nonceStr, signature, function () {

        });
    }


</script>
